<template>
  <a-form
    :model="compInfo.configData"
    name="basic"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
  >
    <a-form-item label="文本内容" name="content">
      <a-input v-model:value="compInfo.configData.content" />
    </a-form-item>
    <a-form-item label="组件宽度" name="width">
      <a-input v-model:value="compInfo.configData.width" />
    </a-form-item>
    <a-form-item label="组件高度" name="height">
      <a-input v-model:value="compInfo.configData.height" />
    </a-form-item>
    <a-form-item label="额外的class" name="classArr">
      <a-select
        v-model:value="compInfo.configData.classArr"
        mode="multiple"
        style="width: 180px"
        placeholder="请选择..."
        :max-tag-text-length="10"
        :options="classOptions"
      ></a-select>
    </a-form-item>
    <a-form-item label="自定义内联样式" name="style">
      <a-textarea
        v-model:value="compInfo.configData.style"
        :auto-size="{ minRows: 3, maxRows: 7 }"
      />
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { allClassList } from '@/utils/ConstUtils'

const compInfo = defineModel<DesignComp>({
  required: true
})
const classOptions = ref(allClassList)
</script>

<style scoped></style>
